<template>
  <div class="login_container">
<!--    雪下的那么深下的那么认真-->
    <Snow></Snow>
<!--    登入盒子-->
     <div class="login_box">
      <!--      npc区域-->
        <div class="avatar_box"  @mouseenter="sayShowPic">
          <img src="../../assets/image/login.png">
        </div>
       <img src="../../assets/image/say.png" id="say" v-show="sayShow">
      <!-- 表单区域-->
       <el-form label-width="70px"ref="loginFormRef" :model="loginForm" class="login_form" :rules="loginFromRules">
<!--         用户名-->
         <el-form-item prop="username" label="用户名:">
           <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
         </el-form-item>
<!--         密码-->
         <el-form-item prop="password" label="密码:">
           <el-input show-password v-model="loginForm.password" placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
         </el-form-item>
<!--         按钮-->
         <el-form-item class="btns">
           <el-button type="warning" :loading="loadShow" plain @click="login">登入</el-button>
           <el-button type="danger"  plain @click="resetLoginForm">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
  </div>
</template>
<script>
import Snow from "@/views/login/components/Snow";
export default {
  name: "Login",
  components:{
    Snow
  },
  data(){
    return{
      //npc是否说话了？
      sayShow:false,
      //登入是否正在加载
      loadShow:false,
      //登入表单----
      loginForm:{
        username:'',
        password:''
      },
      //登入表单校验规则----
      loginFromRules:{
        username: [
          { required:true ,message:"请输入用户名", trigger:"blur"},
          { min:3,max:10,message: "长度在3到10个字符",trigger: "blur"}
        ],
        password: [
          { required:true ,message:"请输入密码", trigger:"blur"},
          { min:6,max:15,message: "长度在6到15个字符",trigger: "blur"}
        ]

      }
    }
  },
  created() {

  },


  mounted() {

  },
  methods:{
    //点击重置按钮重置表单
    resetLoginForm(){
      //elementui 表单组件自带的重置表单方法
      this.$refs.loginFormRef.resetFields();
    },
    //登入
    login(){
      //1.调用表单组件自带的校验方法
      this.$refs.loginFormRef.validate(valid=>{
        // valid返回一个bollean,是否校验通过
        if (!valid){
          return;
        }
        //开始加载
        this.loadShow=true;
        //发送请求
        axios.post("login",this.loginForm).then(val=>{
          if (val.data.meta.status!=200){
            this.$message.error(val.data.meta.msg);
            this.loadShow=false;
            return;
          }
          this.loadShow=false;
          this.$message.success("登入成功");
          //将返回的令牌保存在对话存储中
          window.sessionStorage.setItem('token', val.data.data.token)
          this.$router.push('/home');
        }).catch(error=>{
          this.loadShow=false;
          this.$message.error("服务器出错请联系管理员");
        })
      })
    },
    async sayShowPic(){
     if (this.sayShow==true){
       return
     }
      this.sayShow=true;
      let timer = setTimeout(()=>{
        this.sayShow=false;
        clearTimeout(timer)
      },3000)
    },
    }
}
</script>

<style lang="less" scoped>
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409EFF;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
  z-index: 9999;
}
.login_container{
  height: 100% ;
  background-image: url("../../assets/image/bg.jpg");
  background-size: cover; /* 根据容器大小缩放背景图片 */
  background-position: center; /* 将背景图片居中 */
  background-repeat: no-repeat; /* 禁止背景图片重复 */
}
.login_box{
  width: 450px;
  height: 300px;
  background-color: rgba(218, 232, 169, 0.5);
  border-radius: 50px;
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%,-50%);
  box-shadow: 10px 10px 5px rgba(162, 172, 124, 0.8);
  .avatar_box{
    height: 400px;
    width: 250px;
    position: absolute;
    left: -100px;
    top: -80px;
    img{
      height: 100%;
      width: 100%;
    }
  }
  #say{
    height: 150px;
    width: 190px;
    position: absolute;
    z-index: 2;
    top: -140px;
    left: 100px;
  }
}
.login_form{
  position: absolute;
  bottom: 10px;
  left: 30%;
  width: 70%;
  padding: 0 10px;
  box-sizing: border-box;
}
.btns{
  display: flex;
  justify-content: right;
  margin-top: 30px;
  margin-right: 30px;
}
//设置输入框颜色
/deep/ .el-input__inner {
  background-color: rgba(255, 255,255, 0.8);
}
/deep/ .el-input__inner::placeholder {
  color: rgba(255, 255, 255, 0.8); /* 设置placeholder文本颜色为红色 */
}


</style>
